/**
 * 	生产报价模板
 */
Vue.use(window.vuelidate.default)
var required = window.validators.required

Vue.component('temp-production', {
  props: {
    readonly: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <q-tabs inverted color="primary" v-model="selectedTab">
      <q-tab slot="title" name="tab-1" label="基本信息"></q-tab>
      <q-tab slot="title" name="tab-2" label="原材料费"></q-tab>
      <q-tab slot="title" name="tab-3" label="外协外购件费"></q-tab>
      <q-tab slot="title" name="tab-4" label="加工费"></q-tab>
      <q-tab slot="title" name="tab-5" label="装配费"></q-tab>
      <q-tab slot="title" name="tab-6" label="废品"></q-tab>
      <q-tab slot="title" name="tab-7" label="期间费用"></q-tab>

      <q-tab-pane name="tab-1" class="q-pa-none">
        <q-card class="bg-white no-shadow full-width">
          <q-card-main class="q-px-md">
            <div class=" row justify-start gutter-x-md gutter-y-sm">
              <q-field 
                label="填写日期"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input1" ></q-input>
              </q-field>
              <q-field 
                label="所属车型系列"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input2" ></q-input>
              </q-field>
              <q-field 
                label="零件号"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input3" ></q-input>
              </q-field>
              <q-field 
                label="零件名称"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input4" ></q-input>
              </q-field>
              <q-field 
                label="年度型"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input5" ></q-input>
              </q-field>
              <q-field 
                label="询价文件编号"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input6" ></q-input>
              </q-field>
              <q-field 
                label="日峰产量（个）"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input7" ></q-input>
              </q-field>
              <q-field 
                label="年产能（个）"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input8" ></q-input>
              </q-field>
              <q-field 
                label="项目生命周期（月）"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input9" ></q-input>
              </q-field>
              <q-field 
                label="货币种类"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input10" ></q-input>
              </q-field>
              <q-field 
                label="询价汇率"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input11" ></q-input>
              </q-field>
              <q-field 
                label="供应商代码"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input12" ></q-input>
              </q-field>
              <q-field 
                label="供应商全称"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input13" ></q-input>
              </q-field>
              <q-field 
                label="厂址"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input14" ></q-input>
              </q-field>
              <q-field 
                label="供应商联系人"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input15" ></q-input>
              </q-field>
              <q-field 
                label="联系人职位"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input16" ></q-input>
              </q-field>
              <q-field 
                label="联系人手机"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input17" ></q-input>
              </q-field>
              <q-field 
                label="联系人座机"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input18" ></q-input>
              </q-field>
              <q-field 
                label="电子邮箱"
                orientation="vertical"
                class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <q-input 
                  v-model.trim="baseAddOrEditForm.input19" ></q-input>
              </q-field>
            </div>
          </q-card-main>
        </q-card>
      </q-tab-pane>
      <q-tab-pane name="tab-2" class="q-pa-none">
        <q-card class="bg-white no-shadow full-width">
          <q-card-main class="q-px-md">
            <h-form-table 
              :data="dataTwo" 
              :sum="sumTwo"
              :columns="columnsTwo"
              row-key="id"
              :readonly="readonly" 
              :item-field="itemFieldTwo"
              :sum-field="sumFieldTwo"
              :expression="expressionTwo"
              @change="getNewValueTwo"></h-form-table>
          </q-card-main>
        </q-card>
      </q-tab-pane>
      <q-tab-pane name="tab-3" class="q-pa-none">
        <q-card class="bg-white no-shadow full-width">
          <q-card-main class="q-px-md">
            <h-form-table 
              :data="dataThree" 
              :sum="sumThree"
              :columns="columnsThree" 
              row-key="id"
              :readonly="readonly" 
              :item-field="itemFieldThree"
              :sum-field="sumFieldThree"
              :expression="expressionThree"
              @change="getNewValueThree"></h-form-table>
          </q-card-main>
        </q-card>
      </q-tab-pane>
      <q-tab-pane name="tab-4" class="q-pa-none">
        <h-form-table 
          :data="dataFour" 
          :sum="sumFour"
          :columns="columnsFour" 
          row-key="id"
          :readonly="readonly" 
          :item-field="itemFieldFour"
          :sum-field="sumFieldFour"
          :expression="expressionFour"
          @change="getNewValueFour"></h-form-table>
      </q-tab-pane>
      <q-tab-pane name="tab-5" class="q-pa-none">
        <h-form-table 
          :data="dataFive" 
          :sum="sumFive"
          :columns="columnsFive" 
          row-key="id"
          :readonly="readonly" 
          :item-field="itemFieldFive"
          :sum-field="sumFieldFive"
          :expression="expressionFive"
          @change="getNewValueFive"></h-form-table>
      </q-tab-pane>
      <q-tab-pane name="tab-6" class="q-pa-none">
        <q-table
          class="no-shadow"
          :data="dataSix"
          dense
          separator="cell"
          :columns="columnsSix"
          :rows-per-page-options="[0]"
          :pagination.sync="pagination"
          hide-bottom
          row-key="name"
        >
          <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
            <q-pagination
              v-model="pagination.page"></q-pagination>
          </div>
          <template slot="body" slot-scope="props">
            <q-tr
              :props="props"
            >
              <q-td v-for="(item,index) in columnsSix" :key="item.name" :props="props">
                <q-input :type="index==1?'number':'text'" :readonly="(index==1?false:true)||(props.row.__index==2?true:false)" align="center" v-model.trim="props.row[item.name]" hide-underline style="min-width: 80px"></q-input>
              </q-td>
            </q-tr>
          </template>
          <q-tr slot="bottom-row" slot-scope="props">
            <q-td colspan="100%" class="text-left">
              <div class="q-pa-sm">
                <strong>小计：</strong>{{sumSix}}
              </div>
            </q-td>
          </q-tr>
        </q-table>
      </q-tab-pane>
      <q-tab-pane name="tab-7" class="q-pa-none">
        <q-table
          class="no-shadow"
          :data="dataSeven"
          dense
          separator="cell"
          :columns="columnsSeven"
          :rows-per-page-options="[0]"
          :pagination.sync="pagination"
          hide-bottom
          row-key="name"
        >
          <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
            <q-pagination
              v-model="pagination.page"></q-pagination>
          </div>
          <template slot="body" slot-scope="props">
            <q-tr
              :props="props"
            >
              <q-td v-for="(item,index) in columnsSeven" :key="item.name" :props="props">
                <q-input :type="index==1?'number':'text'" :readonly="index==1?false:true" align="center" v-model.trim="props.row[item.name]" hide-underline style="min-width: 80px"></q-input>
              </q-td>
            </q-tr>
          </template>
          <q-tr slot="bottom-row" slot-scope="props">
            <q-td colspan="100%" class="text-left">
              <div class="q-pa-sm">
                <strong>小计：</strong>{{sumSeven}}
              </div>
            </q-td>
          </q-tr>
        </q-table>
      </q-tab-pane>
    </q-tabs>
  `,
  data: function() {
    return {
      selectedTab: 'tab-1',
      listLoading: false,
      pagination: {
        page: 1,
        rowsPerPage: 0
      },
      //
      baseAddOrEditForm: {
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
        input9: '',
        input10: '',
        input11: '',
        input12: '',
        input13: '',
        input14: '',
        input15: '',
        input16: '',
        input17: '',
        input18: '',
        input19: '',
      },
      // tab 2
      dataTwo:[],
      sumTwo: 0,
      itemFieldTwo: [{ ite1: 'col9', ite2: 'col10', ite3: 'col11' }],
      sumFieldTwo: ['col12'],
      expressionTwo: [1],
      // tab 3
      dataThree: [],
      sumThree: 0,
      itemFieldThree: [{ ite1: 'col41', ite2: 'col42', ite3: 'col43' }],
      sumFieldThree: ['col44'],
      expressionThree: [1],
      // tab 4
      dataFour: [],
      sumFour: 0,
      itemFieldFour: [
        { ite1: 'col105', ite2: 'col106', ite3: 'col108', ite4: 'col109', ite5: 'col110' }, 
        { ite1: 'col108', ite2: 'col111', ite3: 'col112', ite4: 'col109', ite5: 'col110' },
        { ite1: 'col107', ite2: 'col113' }
      ],
      sumFieldFour: ['col107', 'col113', 'col114'],
      expressionFour: [2, 3 ,4],
      // tab 5
      dataFive: [],
      sumFive: 0,
      itemFieldFive: [
        { ite1: 'col1005', ite2: 'col1006', ite3: 'col1008', ite4: 'col1009', ite5: 'col1010' }, 
        { ite1: 'col1008', ite2: 'col1011', ite3: 'col1012', ite4: 'col1009', ite5: 'col1010' },
        { ite1: 'col1007', ite2: 'col1013' }
      ],
      sumFieldFive: ['col1007', 'col1013', 'col1014'],
      expressionFive: [2, 3 ,4],
      // tab 6
      dataSix: [
        {
          col10002: '废品损失',
          col10003: '',
          col10004: '0.00%'
        },
        {
          col10002: '废品收益',
          col10003: '',
          col10004: '0.00%'
        },
        {
          col10002: '废品消耗',
          col10003: '',
          col10004: '0.00%'
        }
      ],
      sumSix: 0,
      
      // tab 7
      dataSeven: [
        {
          col100002: '销售费用',
          col100003: '',
          col100004: '0.00%'
        },
        {
          col100002: '管理费用',
          col100003: '',
          col100004: '0.00%'
        },
        {
          col100002: '财务费用',
          col100003: '',
          col100004: '0.00%'
        }
      ],
      sumSeven: 0,
    }
  },
  validations:{
    baseAddOrEditForm: {
      input1: { required: required },
      input2: { required: required }
    }
  },
  watch: {
    baseAddOrEditForm: {
      handler: function(newV) {
        this.$emit('change', [
          {name: '', rfqTempItemCode: 'BASE_INFO', form: this.baseAddOrEditForm}, 
          {name: '', rfqTempItemCode: 'RAW_MAT', form: {rows: this.dataTwo}, total: this.sumTwo}, 
          {name: '', rfqTempItemCode: 'OUT_SOURCE', form: {rows: this.dataThree},total: this.sumThree}, 
          {name: '', rfqTempItemCode: 'PROCESS', form: {rows: this.dataFour},total: this.sumFour}, 
          {name: '', rfqTempItemCode: 'ASSEMBLE', form: {rows: this.dataFive},total: this.sumFive}, 
        ])
      },
      deep: true
    },
    dataTwo: {
      handler: function(newV) {
        this.$emit('change', [
          {name: '', rfqTempItemCode: 'BASE_INFO', form: this.baseAddOrEditForm}, 
          {name: '', rfqTempItemCode: 'RAW_MAT', form: {rows: this.dataTwo}, total: this.sumTwo}, 
          {name: '', rfqTempItemCode: 'OUT_SOURCE', form: {rows: this.dataThree},total: this.sumThree}, 
          {name: '', rfqTempItemCode: 'PROCESS', form: {rows: this.dataFour},total: this.sumFour}, 
          {name: '', rfqTempItemCode: 'ASSEMBLE', form: {rows: this.dataFive},total: this.sumFive}, 
        ])
      },
      deep: true
    },
    dataThree: {
      handler: function(newV) {
        this.$emit('change', [
          {name: '', rfqTempItemCode: 'BASE_INFO', form: this.baseAddOrEditForm}, 
          {name: '', rfqTempItemCode: 'RAW_MAT', form: {rows: this.dataTwo}, total: this.sumTwo}, 
          {name: '', rfqTempItemCode: 'OUT_SOURCE', form: {rows: this.dataThree},total: this.sumThree}, 
          {name: '', rfqTempItemCode: 'PROCESS', form: {rows: this.dataFour},total: this.sumFour}, 
          {name: '', rfqTempItemCode: 'ASSEMBLE', form: {rows: this.dataFive},total: this.sumFive}, 
        ])
      },
      deep: true
    },
    dataFour: {
      handler: function(newV) {
        this.$emit('change', [
          {name: '', rfqTempItemCode: 'BASE_INFO', form: this.baseAddOrEditForm}, 
          {name: '', rfqTempItemCode: 'RAW_MAT', form: {rows: this.dataTwo}, total: this.sumTwo}, 
          {name: '', rfqTempItemCode: 'OUT_SOURCE', form: {rows: this.dataThree},total: this.sumThree}, 
          {name: '', rfqTempItemCode: 'PROCESS', form: {rows: this.dataFour},total: this.sumFour}, 
          {name: '', rfqTempItemCode: 'ASSEMBLE', form: {rows: this.dataFive},total: this.sumFive}, 
        ])
      },
      deep: true
    },
    dataFive: {
      handler: function(newV) {
        this.$emit('change', [
          {name: '', rfqTempItemCode: 'BASE_INFO', form: this.baseAddOrEditForm}, 
          {name: '', rfqTempItemCode: 'RAW_MAT', form: {rows: this.dataTwo}, total: this.sumTwo}, 
          {name: '', rfqTempItemCode: 'OUT_SOURCE', form: {rows: this.dataThree},total: this.sumThree}, 
          {name: '', rfqTempItemCode: 'PROCESS', form: {rows: this.dataFour},total: this.sumFour}, 
          {name: '', rfqTempItemCode: 'ASSEMBLE', form: {rows: this.dataFive},total: this.sumFive}, 
        ])
      },
      deep: true
    },
    dataSix: {
      handler: function(newV) {
        if (newV[0].col10003 != '' && newV[1].col10003 != '') {
          newV[2].col10003 = newV[0].col10003*1 - newV[1].col10003*1
          this.sumSix = newV[2].col10003
        } else {
          newV[2].col10003 = ''
          this.sumSix = 0
        }
      },
      deep: true
    },
    dataSeven: {
      handler: function(newV) {
        // var colSum = 0 
        var colSum = newV[0].col100003*1 + newV[1].col100003*1 + newV[2].col100003*1
        this.sumSeven = colSum
        if (newV[0].col100003 != '') {
          newV[0].col100004 = newV[0].col100003*1 / colSum * 100 + '%'
        }
        if (newV[1].col100003 != '') {
          newV[1].col100004 = newV[1].col100003*1 / colSum * 100 + '%'
        }
        if (newV[2].col100003 != '') {
          newV[2].col100004 = newV[2].col100003*1 / colSum * 100 + '%'
        }
      },
      deep: true
    }
  },
  computed: {
    columnsTwo: function() {
      return [
        {
          name: 'action',
          label: '操作',
          align: 'center'
        },
        {
          name: 'id',
          label: 'ID',
          align: 'center',
          field: 'id',
          sortable: true
        },
        {
          name: 'col1',
          label: '零件序号',
          align: 'center',
          field: 'col1',
          sortable: true
        },
        {
          name: 'col2',
          label: '原材料生产厂商',
          align: 'center'
        },
        {
          name: 'col16',
          label: '原材料生产厂厂址',
          align: 'center'
        },
        {
          name: 'col3',
          label: '零件名称',
          align: 'center'
        },
        {
          name: 'col4',
          label: '材料规格牌号',
          align: 'center'
        },
        {
          name: 'col5',
          label: '规格',
          align: 'center'
        },
        {
          name: 'col6',
          label: '单位',
          align: 'center'
        },
        {
          name: 'col7',
          label: '采购/指定/自制',
          align: 'center'
        },
        {
          name: 'col8',
          label: '货币币种',
          align: 'center'
        },
        {
          name: 'col9',
          label: '单价/单位',
          align: 'center'
        },
        {
          name: 'col10',
          label: '单件用量',
          align: 'center'
        },
        {
          name: 'col11',
          label: '汇率',
          align: 'center'
        },
        {
          name: 'col12',
          label: '原材料总费用',
          align: 'center'
        },
        {
          name: 'col13',
          label: '进口/国产',
          align: 'center'
        },
        {
          name: 'col14',
          label: '关税号',
          align: 'center'
        },
        {
          name: 'col15',
          label: '关税税率',
          align: 'center'
        }
      ]
    },
    columnsThree: function() {
      return [
        {
          name: 'action',
          label: '操作',
          align: 'center'
        },
        {
          name: 'id',
          label: 'ID',
          align: 'center',
          field: 'id',
          sortable: true
        },
        {
          name: 'col31',
          label: '零件序号',
          align: 'center',
          field: 'col1',
          sortable: true
        },
        {
          name: 'col32',
          label: '下级供应商',
          align: 'center'
        },
        {
          name: 'col33',
          label: '下级供应商生产地',
          align: 'center'
        },
        {
          name: 'col34',
          label: '零件名称',
          align: 'center'
        },
        {
          name: 'col35',
          label: '产品品牌',
          align: 'center'
        },
        {
          name: 'col36',
          label: '规格',
          align: 'center'
        },
        {
          name: 'col37',
          label: '单位',
          align: 'center'
        },
        {
          name: 'col38',
          label: '沿用情况',
          align: 'center'
        },
        {
          name: 'col39',
          label: '采购/指定',
          align: 'center'
        },
        {
          name: 'col40',
          label: '货币币种',
          align: 'center'
        },
        {
          name: 'col41',
          label: '单价/单位',
          align: 'center'
        },
        {
          name: 'col42',
          label: '单件用量',
          align: 'center'
        },
        {
          name: 'col43',
          label: '汇率',
          align: 'center'
        },
        {
          name: 'col44',
          label: '外协外购件总费用',
          align: 'center'
        },
        {
          name: 'col45',
          label: '进口/国产',
          align: 'center'
        },
        {
          name: 'col46',
          label: '关税号',
          align: 'center'
        },
        {
          name: 'col47',
          label: '关税税率',
          align: 'center'
        }
      ]
    },
    columnsFour: function() {
      return [
        {
          name: 'action',
          label: '操作',
          align: 'center'
        },
        {
          name: 'id',
          label: 'ID',
          align: 'center',
          field: 'id',
          sortable: true
        },
        {
          name: 'col101',
          label: '操作号码',
          align: 'center',
          field: 'col101',
          sortable: true
        },
        {
          name: 'col102',
          label: '操作/程序说明',
          align: 'center'
        },
        {
          name: 'col103',
          label: '机器/线体',
          align: 'center'
        },
        {
          name: 'col104',
          label: '机械投资费用 ',
          align: 'center'
        },
        {
          name: 'col105',
          label: '机械设备折旧',
          align: 'center'
        },
        {
          name: 'col106',
          label: '能量损耗',
          align: 'center'
        },
        {
          name: 'col107',
          label: '机器每次运转的费用',
          align: 'center'
        },
        {
          name: 'col108',
          label: '工时',
          align: 'center'
        },
        {
          name: 'col109',
          label: '每周期生产件数',
          align: 'center'
        },
        {
          name: 'col110',
          label: '单件用量',
          align: 'center'
        },
        {
          name: 'col111',
          label: '人工费率',
          align: 'center'
        },
        {
          name: 'col112',
          label: '作业人数',
          align: 'center'
        },
        {
          name: 'col113',
          label: '直接员工每个操作的费用',
          align: 'center'
        },
        {
          name: 'col114',
          label: '加工总费用',
          align: 'center'
        }
      ]
    },
    columnsFive: function() {
      return [
        {
          name: 'action',
          label: '操作',
          align: 'center'
        },
        {
          name: 'id',
          label: 'ID',
          align: 'center',
          field: 'id',
          sortable: true
        },
        {
          name: 'col1001',
          label: '操作号码',
          align: 'center',
          field: 'col1001',
          sortable: true
        },
        {
          name: 'col1002',
          label: '装配/程序说明',
          align: 'center'
        },
        {
          name: 'col1003',
          label: '机器/线体',
          align: 'center'
        },
        {
          name: 'col1004',
          label: '机械投资费用 ',
          align: 'center'
        },
        {
          name: 'col1005',
          label: '机械设备折旧',
          align: 'center'
        },
        {
          name: 'col1006',
          label: '能量损耗',
          align: 'center'
        },
        {
          name: 'col1007',
          label: '机器每次运转的费用',
          align: 'center'
        },
        {
          name: 'col1008',
          label: '工时',
          align: 'center'
        },
        {
          name: 'col1009',
          label: '每周期生产件数',
          align: 'center'
        },
        {
          name: 'col1010',
          label: '单件用量',
          align: 'center'
        },
        {
          name: 'col1011',
          label: '人工费率',
          align: 'center'
        },
        {
          name: 'col1012',
          label: '作业人数',
          align: 'center'
        },
        {
          name: 'col1013',
          label: '直接员工每个操作的费用',
          align: 'center'
        },
        {
          name: 'col1014',
          label: '装配总费用',
          align: 'center'
        }
      ]
    },
    columnsSix: function() {
      return [
        {
          name: 'col10002',
          label: ' ',
          align: 'center',
          field: 'col10002',
        },
        {
          name: 'col10003',
          label: '单件金额',
          align: 'center',
          field: 'col10003',
        },
        {
          name: 'col10004',
          label: '比例',
          align: 'center',
          field: 'col10004',
        },
      ]
    },
    columnsSeven: function() {
      return [
        {
          name: 'col100002',
          label: ' ',
          align: 'center',
          field: 'col100002',
        },
        {
          name: 'col100003',
          label: '单件金额',
          align: 'center',
          field: 'col100003',
        },
        {
          name: 'col100004',
          label: '比例',
          align: 'center',
          field: 'col100004',
        },
      ]
    }
  },
  methods: {
    getNewValueTwo: function(newV, sum) {
      this.$emit('change', newV, sum)
      this.sumTwo = sum
      this.dataTwo = newV
    },
    getNewValueThree: function(newV, sum) {
      this.$emit('change', newV, sum)
      this.sumThree = sum
      this.dataThree = newV
    },
    getNewValueFour: function(newV, sum) {
      this.$emit('change', newV, sum)
      this.sumFour = sum
      this.dataFour = newV
    },
    getNewValueFive: function(newV, sum) {
      this.$emit('change', newV, sum)
      this.sumFive = sum
      this.dataFive = newV
    },
    getNewValueSix: function(newV, sum) {
      console.log(newV, sum, 'tab 66666 data值')
      this.$emit('change', newV, sum)
    },
    getNewValueSeven: function(newV, sum) {
      console.log(newV, sum, 'tab 77777 data值')
      this.$emit('change', newV, sum)
    },
  }
})